<template>
	<view class="layout">
		<view class="navbar">
			<view class="statuBar" :style="{height:getStatusBarHeight()+'px'}"></view>
			<view class="titleBar" :style="{height:getTitleBarHeight()+'px', marginLeft:getLeftIconLeft() + 'px'}">
				<view class="goback" @click="goback">
					<uni-icons type="left" color="#000" size="25"></uni-icons>
				</view>
				<view class="title">{{title}}</view>
				<view class="home" @click="gohome">
					<uni-icons type="home" color="#000" size="25"></uni-icons>
				</view>
			</view>
		</view>
		<view class="fill" :style="{height:getNavBarHeight()+'px'}">
		</view>
	</view>
</template>

<script setup>
import { ref, defineProps, onMounted } from 'vue';
import { 
	getStatusBarHeight,
	getTitleBarHeight,
	getNavBarHeight,
	getLeftIconLeft,
	} from '@/utils/system.js'
const props = defineProps({
	title:{
		type:String,
		default:""
	}
})

//函数
const goback = () => {
	uni.navigateBack()
}
const gohome = () => {
	uni.reLaunch({
		url:"/pages/DiscoverView/DiscoverView"
	})
}

//钩子
onMounted(() => {
	console.log(props.title);
})
</script>

<style lang="scss" scoped>
.layout{
	background-color: ghostwhite;
	.navbar{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 80rpx;
		z-index: 10;
		background: ghostwhite;
		.titleBar{
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 30rpx;
			width: 100%;
			padding: 0 30rpx;
			.title{
				font-size: 18px;
				color: #444;
			}

		}
	}
}
</style>